<template>
    <div>
        <div style="margin: 10px 0;">
            <el-input style="width: 200px;" placeholder="请输入推荐商品名称" suffix-icon="el-icon-search" v-model="searchRecommendGoodsName"></el-input>
            <el-button style="margin-left: 5px;" type="primary" @click="search">搜索</el-button>
        </div>

        <div style="margin: 10px 0;">
            <el-button type="primary" @click="addRecommendGoods">新增<i class="el-icon-circle-plus-outline"></i></el-button>
            <el-button type="danger" @click="batchDelete">批量删除<i class="el-icon-remove-outline"></i></el-button>
            <!-- <el-button type="primary">导入<i class="el-icon-bottom"></i></el-button>
            <el-button type="primary">导出<i class="el-icon-top"></i></el-button> -->
        </div>

        <el-table :data="tableData" border stripe :header-cell-class-name="headerBg" @selection-change="handleSelectionChange">
            <el-table-column
                type="selection"
                width="55">
            </el-table-column>
            <!-- 下来展开其他信息 -->
            <!-- <el-table-column type="expand">
                <template slot-scope="scope">
                    <el-form label-position="left" inline class="demo-table-expand">
                        <el-form-item label="商品ID" class="demo-table-item">
                            <span>{{ scope.row.goodsId }}</span>
                        </el-form-item>
                        <el-form-item label="排序值" class="demo-table-item">
                            <span>{{ scope.row.recommendGoodsSort }}</span>
                        </el-form-item>
                        <el-form-item label="商品图片" class="demo-table-item">
                            <el-image
                                style="width: 80px; height: 80px"
                                :src="scope.row.url"
                                fit="fill"
                                :preview-src-list="scope.row.srcList"
                                >
                            </el-image>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column> -->

            <el-table-column prop="recommendGoodsId" label="推荐商品ID">
            </el-table-column>
            <el-table-column prop="recommendGoodsName" label="推荐商品名称">
            </el-table-column>
            <el-table-column prop="goodsId" label="商品ID">
            </el-table-column>
            <!-- slot-scope="scope"用于获取当前行数据对象 -->
            <el-table-column prop="url" label="商品图片" width="80">
                <template slot-scope="scope">
                    <el-image
                        style="width: 50px; height: 50px"
                        :src="scope.row.url"
                        fit="fill"
                        :preview-src-list="scope.row.srcList"
                        >
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column prop="recommendGoodsSort" label="排序值" width="125" sortable>
            </el-table-column>
            <el-table-column prop="recommendGoodsCreateTime" label="添加时间" sortable>
            </el-table-column>
            <el-table-column prop="recommendGoodsUpdateTime" label="更新时间" sortable>
            </el-table-column>
            <el-table-column label="操作" width="180">
                <template  slot-scope="scope">
                    <el-button type="success" @click="updateRecommendedGood(scope.row)">编辑<i class="el-icon-edit"></i></el-button>
                <el-button type="danger" @click="deleteRecommendedGood(scope.row.recommendGoodsId)">删除<i class="el-icon-remove-outline"></i></el-button>
                </template>
                
            </el-table-column>
        </el-table>
        <el-dialog class="updatedialog" :title=dialogTitle :visible.sync="dialogFormVisible" :center="true" width="35%">
            <el-form :model="form" ref="form" label-width="100px" class="demo-ruleForm">
                <el-form-item label="商品ID" prop="goodsId">
                    <el-input v-model="form.goodsId"></el-input>
                </el-form-item>
                <el-form-item label="商品名称" prop="recommendGoodsName">
                    <el-input v-model="form.recommendGoodsName"></el-input>
                </el-form-item>
                <el-form-item label="排序值" prop="recommendGoodsSort">
                    <el-input v-model="form.recommendGoodsSort"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialogBtn">
                <el-button type="primary" @click="submit()">确 定</el-button>
                <el-button @click="resetForm('form')">重 置</el-button>
            </div>
        </el-dialog>
        <div style="padding: 10px 0;">
            <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageInfo.pageNow"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageInfo.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageInfo.totalBooks">
            </el-pagination>
        </div>
    </div>
</template>

<script>

export default {
    name: 'RecommendedProduct',
    data() {
        return {
            searchRecommendGoodsName: '',
            tableData: [
                {
                    recommendGoodsId: '1746483322634113025',
                    recommendGoodsName: '华为Mate99',
                    goodsId: '1746482718981492738',
                    recommendGoodsSort: 1,
                    recommendGoodsCreateTime: '2024-1-2 11:10:10',
                    recommendGoodsUpdateTime: '2024-1-2 11:10:10',
                    url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                    srcList: [
                        'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                    ],
                },
                {
                    recommendGoodsId: '21111111111111111111',
                    recommendGoodsName: '华为Mate99',
                    goodsId: '1746482718981492738',
                    recommendGoodsSort: 2,
                    recommendGoodsCreateTime: '2024-1-2 11:10:10',
                    recommendGoodsUpdateTime: '2024-1-2 11:10:10',
                    url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                    srcList: [
                        'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                    ],
                },
                {
                    recommendGoodsId: '31111111111111111111',
                    recommendGoodsName: '华为Mate99',
                    goodsId: '1746482718981492738',
                    recommendGoodsSort: 3,
                    recommendGoodsCreateTime: '2024-1-2 11:10:10',
                    recommendGoodsUpdateTime: '2024-1-2 11:10:10',
                    url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                    srcList: [
                        'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                    ],
                },
            ],
            selectedTable: [],
            dialogFormVisible: false,
            dialogType: '',
            dialogTitle: '',
            form: {
                goodsId: '',
                recommendGoodsName: '',
                recommendGoodsSort: '',
            },
            pageInfo: {
                pageNow: 1,     //当前页数
                pageSize: 10,   //每页显示的数据量
                totalCarousel: 0    //总数据量
            },
            headerBg: 'headerBg'
        }
    },
    mounted () {
        this.getRecommendGoodsList()
    },
    methods: {
        async getRecommendGoodsList(){
            // try {
            //     this.loading = true
            //     const content = await getCarouselList(this.pageInfo.pageNow, this.pageInfo.pageSize)
            //     this.tableData = content.message.rows
            //     this.totalCarousel = content.message.total
            // } catch (error) {
            //     this.$message.error(error)
            // } finally {
            //     setTimeout(() => {
            //         this.loading = false  // 请求完成后隐藏加载提示
            //     }, 1000); // 设置延迟时间为1秒钟
            // }
        },
        handleSizeChange(val) {
            //设置每页显示条数时，更新pageSize，重新获取图书列表
            this.pageInfo.pageSize = val
            this.getRecommendGoodsList()
        },
        handleCurrentChange(val) {
            //翻页或跳转特定页码时，更新当前页码pageNow，重新获取图书列表
            this.pageInfo.pageNow = val
            this.getRecommendGoodsList()
        },
        search() {

        },
        handleSelectionChange(val) {
            this.selectedTable = val
            console.log(this.selectedTable);
            if(this.selectedTable.length === 0){
                console.log("选中的表格为空");
            }
        },
        addRecommendGoods() {
            this.dialogFormVisible = true
            this.dialogType = 'add'
            this.dialogTitle = '添加推荐商品'
            this.form = {} //清空弹框中的表单
        },
        batchDelete() {
            if(this.selectedTable.length === 0){
                this.$message({
                    message: '请选择需要删除的推荐商品',
                    type: 'warning'
                });
            } else {
                this.$message({
                    message: '删除成功',
                    type: 'success'
                });
            }
            console.log(" 删除");
            console.log(this.selectedTable);
        },
        // 修改推荐商品
        updateRecommendedGood(row){
            console.log(row);
            this.dialogFormVisible = true
            this.form = JSON.parse(JSON.stringify(row))
            this.dialogType = 'update'
            this.dialogTitle = '修改推荐商品'
        },
        // 删除推荐商品
        deleteRecommendedGood(recommendGoodsId) {
            console.log(recommendGoodsId);
        },
        // 弹框中的提交按钮
        submit(){
            console.log(this.form);
        },
        // 弹框中的重置按钮
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
    }

}
</script>

<style>
.headerBg {
    font-weight: 1000;
    color: black;
    background-color: #eee !important;
}

/* .demo-table-expand {
    font-size: 0;
}
.demo-table-item{
    margin-left: 100px;
}
.demo-table-expand label {
    font-weight: 1000;
    width: 90px;
    color: black;
}
.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
} */

.dialogBtn {
    text-align: center;
}

</style>